<template>
  <div role="tabpanel" class="tab-panel" id="News">
    <ul class="list-group">
      <li class="list-group-item" v-for="item in news" :key="item.id">
        {{item.content}}
        <button
          type="button"
          class="btn btn-primary"
          data-toggle="button"
          aria-pressed="false"
          autocomplete="off"
          @click="handle(item)"
        >新闻详情</button>
      </li>
    </ul>
    <div class="alert alert-success" role="alert">
     <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsC",
  data(){
    return {
      news:[
        {id:1,content:'海内存知己，天涯若比邻：今天天气不错，户外惊现...'},
        {id:2,content:'海内存知己，天涯若比邻：光天化日之下，一男子...'},
        {id:3,content:'海内存知己，天涯若比邻：村头一只猪，竟然...'},
      ]
    }
  },
  methods:{
    handle(item){
      // 也可以使用 this.$router.replace 跳转页面 replace会覆盖浏览器历史
      this.$router.push({
        // 通过命名路由 来实现切换组件
        name:'newsdetail',
        params:{
          id:item.id,
          content:item.content
        }
      })
    }
  }
};
</script>

<style scoped>
</style>
